<template>
    <div id="editor" ref="editor" @input="outputContent">
    </div>
</template>

<script>
    import Vue from 'vue'
    import WangEditor from './wangeditor/release/wangEditor.js'
    import Cookie from '~util/js.cookie.js'
    import Api from '~util/api.js'

    export default {
        props: ['inputText', 'type'], // type:1:user;2:gm;待扩展
        data() {
            return {
                editor: null,
                uploadUrl: Api.uploadImg2,
                userMenu: ['bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'emoticon', 'justify', 'image', 'link', 'undo', 'redo', 'importHtml'],
                gmMenu: ['bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'emoticon', 'justify', 'image', 'link', 'undo', 'redo', 'importHtml'],
            }
        },
        computed: {},
        mounted() {
            this.createEditor()
        },
        watch: {
            inputText(value){
//                console.log(value)
                // 如果调用方在页面渲染后重新设置inputText，代表着视图将编译器内容重置成value
                this.editor.txt.html(value)
                this.outputContent()
            }
        },
        methods: {
            createEditor() {
                this.editor = new WangEditor('#editor')

                this.setUploadImgConfig() // 上传图片相关配置
                this.setOnChange() // 设置编辑器变化时的处理行为
                this.setUploadCallback() // 设置图片的回调

                this.setBaseConfig()
                this.setDiffConfig() // 设置视type不同而不同的差异化配置，放在最后，可覆盖前面的配置

                this.editor.create()

                // 默认出现的文字内容
                if (this.inputText !== '' && this.inputText !== undefined) {
                    // 如果有，默认肯定是读取过来的富文本(即带有格式)
                    this.editor.txt.html(this.inputText)
                }
                this.dealToolbar() // 增大工具栏的z-index
                this.$nextTick(function () {
                    this.outputContent()
                })
            },

            outputContent(){
                let firstImg = this.editor.$textElem[0].querySelector('img') // 编辑区域中所有的img对象
                let html = this.editor.txt.html() // typeof string

                // 此处可能对html进行一些xss攻击过滤；以及其他改变；视情况 user或者gm可定义不同的处理规则

                this.$emit('content', {
                    ehtml: html, // 处理后的内容
                    efirstImg: firstImg && firstImg.getAttribute('src'), // 当无图片是为null
                    editor: this.editor, // 暴露给外部使用组件，如果需要可以自行操作
                })
            },
            setBaseConfig(){

                this.editor.customConfig.zIndex = 3
            },
            setDiffConfig(){
                let type = this.type;
                if (type != 1 && type != 2) {
                    type = 1
                }
                // 设置一些差异化的配置
                switch (type) {
                    case 1: // user
                        this.editor.customConfig.menus = this.userMenu
                        this.editor.customConfig.pasteText = true // 只粘贴纯文本，会跳过图片
                        this.editor.customConfig.pasteFilter = true // 过滤粘贴进来的html文本的样式
                        break;
                    case 2: // gm
                        this.editor.customConfig.menus = this.gmMenu
                        this.editor.customConfig.pasteText = false
                        this.editor.customConfig.pasteFilter = false
                        break;
                }
            },
            setUploadImgConfig(){
                // 设置上传图片文件相关的配置参数，无论哪种类型，都一样的配置
                this.editor.customConfig.uploadImgServer = this.uploadUrl
                this.editor.customConfig.uploadFileName = 'imgFile'
                this.editor.customConfig.uploadImgParams = {
                    param: JSON.stringify({
                        user_id: Cookie.get('WD_b_id'),
                        h5_request: 1,
                        app_type: 'fxx'
                    })
                }
                this.editor.customConfig.withCredentials = true
                this.editor.customConfig.uploadImgMaxLength = 1
                this.editor.customConfig.showLinkImg = false; // 不允许使用网络图片

// 2017.09.25 该配置导致图片无法用菜单功能居中，先去掉
//                this.editor.customConfig.imgAlone = true // 图片单独占据一行
            },
            setOnChange(){
                // 用户操作（鼠标点击、键盘打字）导致内容变化时，会自动触发onchange函数执行；
                // 用户使用js修改innerHTML后，需手动执行editor.change()
                let _this = this
                this.editor.customConfig.onchange = function (html) {
                    // html 即变化之后的内容
                    _this.outputContent()
                }
            },
            setUploadCallback(){
                this.editor.customConfig.uploadImgHooks = {
                    customInsert: function (insertImg, result, editor) {
                        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果]
                        if (result && result.url) {
                            var url = result.url
                            insertImg(url)
                        } else {
                            alert('图片上传失败')
                        }
                    }
                }
            },
            dealToolbar(){
                // 增大菜单的z-index，解决浮动菜单无法点击问题
                const toolbar = document.getElementsByClassName('w-e-menu')
                if (!toolbar) {
                    return
                }
                for (let i = 0; i < toolbar.length; i++) {
                    toolbar[i].style.zIndex = '4'
                }
            }
        },
        components: {}
    }
</script>
<style lang="scss" type="text/scss">
    #editor {
        flex: 1;
        min-height: 350px; /*外围可能动态计算，所以组件内限定最小高度*/
        display: flex;
        flex-direction: column;
        img {
            opacity: 1 !important;
        }
        .w-e-toolbar {
            flex: 0 0 auto;
            position: sticky;
            top: 0;
            z-index: 999;
            height: 46px;
            overflow: visible;
            .w-e-panel-container {
                position: absolute;
                top: 46px;
                left: 50%;
                border: 1px solid #CCC;
                border-top: 0;
                box-shadow: 1px 1px 2px #CCC;
                color: #333;
                background-color: #FFF; /* 为 emotion panel 定制的样式 */
                /* 上传图片的 panel 定制样式 */
            }
            .w-e-panel-container .w-e-panel-close {
                position: absolute;
                right: 0;
                top: 0;
                padding: 5px;
                margin: 2px 5px 0 0;
                cursor: pointer;
                color: #999;
            }
            .w-e-panel-container .w-e-panel-close:hover {
                color: #333;
            }
            .w-e-panel-container .w-e-panel-tab-title {
                list-style: none;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                font-size: 14px;
                margin: 2px 10px 0 10px;
                border-bottom: 1px solid #F1F1F1;
            }
            .w-e-panel-container .w-e-panel-tab-title .w-e-item {
                padding: 3px 5px;
                color: #999;
                cursor: pointer;
                margin: 0 3px;
                position: relative;
                top: 1px;
            }
            .w-e-panel-container .w-e-panel-tab-title .w-e-active {
                color: #333;
                border-bottom: 1px solid #333;
                cursor: default;
                font-weight: 700;
            }
            .w-e-panel-container .w-e-panel-tab-content {
                padding: 10px 15px 10px 15px;
                font-size: 16px; /* 输入框的样式 */
                /* 按钮的样式 */
            }
            .w-e-panel-container .w-e-panel-tab-content input:focus, .w-e-panel-container .w-e-panel-tab-content textarea:focus, .w-e-panel-container .w-e-panel-tab-content button:focus {
                outline: none;
            }
            .w-e-panel-container .w-e-panel-tab-content textarea {
                width: 100%;
                border: 1px solid #CCC;
                padding: 5px;
            }
            .w-e-panel-container .w-e-panel-tab-content textarea:focus {
                border-color: #1E88E5;
            }
            .w-e-panel-container .w-e-panel-tab-content input[type=text] {
                border: none;
                border-bottom: 1px solid #CCC;
                font-size: 14px;
                height: 20px;
                color: #333;
                text-align: left;
            }
            .w-e-panel-container .w-e-panel-tab-content input[type=text].small {
                width: 30px;
                text-align: center;
            }
            .w-e-panel-container .w-e-panel-tab-content input[type=text].block {
                display: block;
                width: 100%;
                margin: 10px 0;
            }
            .w-e-panel-container .w-e-panel-tab-content input[type=text]:focus {
                border-bottom: 2px solid #1E88E5;
            }
            .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button {
                font-size: 14px;
                color: #1E88E5;
                border: none;
                padding: 5px 10px;
                background-color: #FFF;
                cursor: pointer;
                border-radius: 3px;
            }
            .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.left {
                float: left;
                margin-right: 10px;
            }
            .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.right {
                float: right;
                margin-left: 10px;
            }
            .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.gray {
                color: #999;
            }
            .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.red {
                color: #C24F4A;
            }
            .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button:hover {
                background-color: #F1F1F1;
            }
            .w-e-panel-container .w-e-panel-tab-content .w-e-button-container:after {
                content: "";
                display: table;
                clear: both;
            }
            .w-e-panel-container .w-e-emoticon-container .w-e-item {
                cursor: pointer;
                font-size: 18px;
                padding: 0 3px;
                display: inline-block;
                *display: inline;
                *zoom: 1;
            }
            .w-e-panel-container .w-e-up-img-container {
                text-align: center;
            }
            .w-e-panel-container .w-e-up-img-container .w-e-up-btn {
                display: inline-block;
                *display: inline;
                *zoom: 1;
                color: #999;
                cursor: pointer;
                font-size: 60px;
                line-height: 1;
            }
            .w-e-panel-container .w-e-up-img-container .w-e-up-btn:hover {
                color: #333;
            }
        }
        .w-e-text-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            .w-e-text {
                flex: 1;
            }
        }
    }
</style>
